<template>
  <div class="page">
    <div class="page_top ai-margin-bottom ai-border-bottom">
      <div class="cont ai-margin-tb-sz  ai-margin-lr">
        <div class="cont_left">
          <el-input  size="small" v-model="formInline.id" placeholder="请输入工程师ID"  style="width: 200px;" class="filter-item"
                     @input="handleContent" @keyup.enter.native="onSubmit"/>
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="onSubmit">
            查询
          </el-button>
        </div>
      </div>
    </div>
    <div class="page_bottom">
      <el-table :data="tableData.slice((currpage - 1) * pageSizes, currpage * pageSizes)" border stripe style="width: 100%">
        <el-table-column prop="id" label="维修ID" min-width="80" align="center"></el-table-column>
        <el-table-column prop="applicant" label="报修人姓名" min-width="120" align="center"></el-table-column>
        <el-table-column prop="phone" label="报修人电话" min-width="120" align="center"></el-table-column>
        <el-table-column prop="status" label="报修状态" width="120" align="center">
          <template slot-scope="{row}">
            <el-tag size="mini" :type="row.status === 0 ? 'warning' : 'success'">{{row.status === 0 ? '待处理' : '已处理'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status_pass" label="是否转交" width="120" align="center">
          <template slot-scope="{row}">
            <el-tag size="mini" :type="row.status_pass === 1  ? 'success' : 'warning'">{{row.status_pass === 1 ? '已转交' :'未转交'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="问题详情" min-width="150" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="350" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="handleDetails(scope.row)">详情</el-button>
            <el-button type="primary" size="mini"v-if="scope.row.status !== 1" @click="handleOperate(scope.row)">转交</el-button>
            <el-button type="primary" size="mini" v-else @click="handleOperate(scope.row)" disabled>转交</el-button>
            <el-button type="danger"  size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination ai-margin-tb" style="text-align: center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-size="pageSizes"
          :page-sizes="sizes"
          layout="total, prev, pager, next"
          :total="tableData.length"
        ></el-pagination>
        <!-- , prev, pager, next -->
      </div>
    </div>
    <!--        侧边框-->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="40%"  >
      <el-form :model="repairData" label-width="200px" style="height: calc(100vh - 40px); " class="ai-margin-tb ai-text-auto">
        <el-form-item label="设备图片：">
          <label v-if="equipmentData.file === '' || equipmentData.file === null">无图片</label>
          <img v-else :src="equipmentData.file" width="200" height="150">
        </el-form-item>
        <el-form-item label="公司名称：">
          <label>{{equipmentData.user_dep === null ? '——' : equipmentData.user_dep}}</label>
        </el-form-item>
        <el-form-item label="公司地址：">
          <label>{{equipmentData.user_address === null ? '——' : equipmentData.user_address}}</label>
        </el-form-item>
        <el-form-item label="公司负责人：">
          <label>{{equipmentData.user === null ? '——' : equipmentData.user}}</label>
        </el-form-item>
        <el-form-item label="联系电话：">
          <label>{{equipmentData.user_phone === null ? '——' : equipmentData.user_phone}}</label>
        </el-form-item>
        <el-form-item label="设备型号：">
          <label>{{equipmentData.type === null ? '——' : equipmentData.type }}</label>
        </el-form-item>
        <el-form-item label="设备ID：">
          <label>{{equipmentData.id === null ? '——' : equipmentData.id }}</label>
        </el-form-item>
        <el-form-item label="设备机身号：">
          <label>{{equipmentData.number === null ? '——' : equipmentData.number }}</label>
        </el-form-item>
        <el-form-item label="墨水溶剂型号：">
          <label>{{equipmentData.ink_type === null ? '——' : equipmentData.ink_type }}</label>
        </el-form-item>
        <el-form-item label="安装日期：">
          <label>{{equipmentData.installDate === null ? '——' : equipmentData.installDate}}</label>
        </el-form-item>
        <el-form-item label="提交人：">
          <label>{{repairData.applicant === null ? '——' : repairData.applicant }}</label>
        </el-form-item>
        <el-form-item label="联系电话：">
          <label>{{repairData.phone === null ? '——' : repairData.phone }}</label>
        </el-form-item>
        <el-form-item label="提交日期：">
          <label>{{repairData.createTime === null ? '——' : repairData.createTime }}</label>
        </el-form-item>
        <el-form-item label="报修状态：" >
          <el-tag :type="repairData.status === 0 ? 'warning' : 'success'">{{repairData.status === 0 ? '待处理' : '已处理'}}</el-tag>
        </el-form-item>
        <el-form-item label="工程师工号：" >
          <label>{{engineerData.number === null || engineerData.number === "" ? '——' : engineerData.number}}</label>
        </el-form-item>
        <el-form-item label="工程师姓名：" >
          <label>{{engineerData.name === null || engineerData.name === "" ? '——' : engineerData.name}}</label>
        </el-form-item>
        <el-form-item label="工程师职位：" >
          <label>{{engineerData.job === null || engineerData.job === "" ? '——' : engineerData.job}}</label>
        </el-form-item>
        <el-form-item label="联系电话：" >
          <label>{{engineerData.phone === null || engineerData.phone === "" ? '——' : engineerData.phone}}</label>
        </el-form-item>
        <div class="demo-drawer__footer ai-margin ">
          <el-button class="ai-float-right ai-margin-left" type="primary" @click="drawer = false">返 回</el-button>
        </div>
      </el-form>
    </el-drawer>
    <!--        弹出框-->
    <el-dialog title="选择转让工程师" :visible.sync="dialogTableVisible" width="60%">
      <el-table :data="gridData.slice((GetCurrpage - 1) * 5, GetCurrpage * 5)" border>
        <el-table-column prop="id" label="工程师ID" min-width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="工程师姓名" align="center"></el-table-column>
        <el-table-column prop="job" label="工程师职位" align="center"></el-table-column>
        <el-table-column prop="phone" label="工程师电话" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="small" @click="handlePass(row)">转交</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination ai-margin-tb" style="text-align: center">
        <el-pagination
          background
          @current-change="handleCurrentSelect"
          :current-page="GetCurrpage"
          :page-size= "GetPageSize"
          layout="total, prev, pager, next"
          :total="gridData.length"
        ></el-pagination>
        <!-- , prev, pager, next -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">返 回</el-button>
        <!--                <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {deleteRepair, getRepair, getRepairDetails, transferTask} from "../../api/repair";
  import {getEngineer, getEngineerById} from "../../api/engineer";
  import {getEquipmentById} from "../../api/equipment";

  export default {
    name: "MaintenanceRecords",
    data(){
      return{
        currentPage1: 1,
        currpage: 1,
        GetCurrpage: 1,
        pageSizes: 10,
        GetPageSize: 5,
        sizes: [10, 20, 30],
        tableData: [],
        drawer: false,
        formInline:{
          id:""
        },
        repairData:{
          applicant: "",
          phone: "",
          equipment_id: "",
          status: "",
          engineer_id: "",
          engineer_id_pass: "",
          createTime: "",
          content: "",
          status_pass: "",
          number: "",
          user_dep: "",
          user_address: "",
          equipment_file:"",
          file:[]
        },
        equipmentData: {
          type:"",
          configure:"",
          number:"",
          ink_type:"",
          installDate:"",
          engineer:"",
          user_dep:"",
          user_address:"",
          user:"",
          user_phone:"",
          engineer_id:"",
          file: "",
        },
        engineerData:{
          id: "",
          number: "",
          password: "",
          name:"",
          job: "",
          phone: "",
        },
        gridData: [],
        dialogTableVisible: false,
        repairID: "",
      }
    },
    mounted(){
      this.handleContent()
    },
    methods:{
      handleContent(){
        getRepair()
          .then(rsp =>{
            console.log(rsp)
            this.tableData = rsp.result;
          })
          .catch(respond =>{

            console.log(respond)
          })
      },
      /**
       * 详情
       * @param row
       */
      handleDetails(row){
        this.drawer = true
        getRepairDetails(row.id)
          .then(rsp =>{
            console.log(rsp)
            this.repairData = rsp.result
            let id = this.repairData.equipment_id
            let engineerID = "";
            if (this.repairData.engineer_id_pass === null){
              engineerID = this.repairData.engineer_id
            } else {
              engineerID = this.repairData.engineer_id_pass
            };
            this.handleEngineerDetails(engineerID)
            this.handleEquipmentDetails(id)
          })
          .catch(respond =>{
            console.log(respond)

          })
      },
      /**
       * 查询设备详情
       * @param id
       */

      handleEquipmentDetails(id){
        this.drawer = true
        getEquipmentById(id)
          .then(rsp =>{
            console.log(rsp)
            this.equipmentData = rsp.result[0]
          })
          .catch(respond =>{
            console.log(respond)
          })
      },
      /**
       * 查询工程师详情
       * @param id
       */
      handleEngineerDetails(id){
        getEngineerById(id)
          .then(rsp =>{
            console.log(rsp)
            this.engineerData = rsp.result;
          })
          .catch(respond =>{
            console.log(respond);
          })
      },

      /**
       * 搜索维修单
       */
      onSubmit(){
        console.log(this.formInline.id)
        if (this.formInline.id === ''){
          this.$message.warning("请输入维修单ID")
        } else {
          getRepairDetails(this.formInline.id)
            .then(rsp =>{
              console.log(rsp)
              this.tableData = []
              this.$message.success(rsp.msg)
              this.tableData.push(rsp.result)
            })
            .catch(respond =>{
              this.$message.warning(respond.msg)

              console.log(respond.data.result)
            })
        };
      },
      /**
       * 删除维修单
       * @param row
       */
      handleDelete(row){
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRepair(row.id)
            .then(rsp =>{
              console.log(rsp)
            })
            .catch(respond =>{
              this.$message.success(respond.data.msg)
              this.handleContent();
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },//删除
      handleOperate(row){
        this.repairID = row.id;
        this.dialogTableVisible = true;
        this.handleEngineerContent();
      },
      /**
       * 转交工程师
       * @param row
       */
      handlePass(row){
        transferTask(this.repairID,row.id)
          .then(rsp =>{
            console.log(rsp)
            this.$message.success(rsp.msg);
            this.dialogTableVisible = false;
            this.handleContent();
          })
          .catch(respond =>{
            this.$message.warning(respond.msg)
            console.log(respond)
          })
      },
      handleEngineerContent(){
        getEngineer()
          .then(rsp =>{
            console.log(rsp)
            this.gridData = rsp.result;

          })
          .catch(respond =>{
            console.log(respond)
          })
      },//工程师信息
      handleSizeChange(val) {
        this.pageSizes = val;
      },
      handleCurrentChange(val) {
        this.currpage = val;
      },
      handleCurrentSelect(val) {
        this.GetCurrpage = val;
      },
      handleClose(done) {
        done();
      }
    }
  };
</script>

<style scoped lang="scss">
  .page{
    width: 95%;
    margin: 0 auto;
    .page_top{
      .cont{
        margin: 30px 0px;
        display: flex;
        flex-direction: row;
        .cont_left{
          flex: 1;
        }
        .cont_right{
          flex: 1;
          text-align: right;
        }
      }
    }
  }
</style>
